<template>
	<view>
		<!-- 发票明细 start -->
		<view class="fu-invoice-wrap">
			
			<view class="flex fu-invoice-item">
				<view class="fu-invoice-item-title text-333">
					{{i18n['发票类型']}}
				</view>
				<view class="fu-invoice-item-info text-666">
					<text>{{i18n['电子发票']}}</text>
				</view>
			</view>
			
			<view class="flex red-item">
				{{i18n['发票人信息']}}
			</view>
			
			<view class="flex fu-invoice-item fu-invoice-item-active">
				<view class="fu-invoice-item-title text-333">
					{{i18n['抬头类型']}}
				</view>
				<view class="fu-invoice-item-info text-666 flex align-center justify-end">
					<label class="radio flex align-center justify-end" @click="changeRise(1)">
						<radio class="radio-scale" :color="colorTheme" :checked='invoiceData.invoice_type == 1' style="transform: scale(0.7);" /><text
						 style="margin-right: 10rpx;">i18n['个人']</text>
					</label>
					<label class="radio flex align-center justify-end" @click="changeRise(2)">
						<radio class="radio-scale" :color="colorTheme" :checked='invoiceData.invoice_type == 2' style="transform: scale(0.7);" /><text>{{i18n['企业']}}</text>
					</label>
				</view>
			</view>
			<view class="flex fu-invoice-item fu-invoice-item-active">
				<view class="fu-invoice-item-title flex align-center text-333">
					{{i18n['发票抬头']}}
				</view>
				<view class="fu-invoice-item-info text-666">
					<input type="text" placeholder-class="grey-text" v-model="invoiceData.invoice_title" :placeholder="invoiceData.invoice_type == 1?i18n['发票抬头不能为空']:i18n['发票抬头不能为空']" />
				</view>
			</view>
			<view class="flex fu-invoice-item fu-invoice-item-active" v-show="invoiceData.invoice_type == 2">
				<view class="fu-invoice-item-title text-333">
					{{['税号']}}
				</view>
				<view class="fu-invoice-item-info text-666">
					<input type="text" placeholder-class="grey-text" v-model="invoiceData.invoice_company_duty_paragraph" :placeholder="i18n['企业单位税号不能为空']" />
				</view>
			</view>
			<!-- 展开折叠 start -->
			<!-- <view style="text-align: center;height: 60rpx;line-height: 60rpx;" @click="clickArrow" v-show="invoiceData.invoice_type == 2">
				<text :class="isClick?'cuIcon-fold':'cuIcon-unfold'"></text>
			</view>
			<block v-if="invoiceData.invoice_type == 2 && isClick">
				<view class="flex fu-invoice-item">
					<view class="fu-invoice-item-title text-333">
						开户银行
					</view>
					<view class="fu-invoice-item-info text-666">
						<input type="text" class="" v-model="invoiceData.invoice_company_bank" placeholder="选填" />
					</view>
				</view>
				<view class="flex fu-invoice-item">
					<view class="fu-invoice-item-title text-333">
						银行账号
					</view>
					<view class="fu-invoice-item-info text-666">
						<input type="text" class="" v-model="invoiceData.invoice_company_bank_num" placeholder="选填" />
					</view>
				</view>
				<view class="flex fu-invoice-item">
					<view class="fu-invoice-item-title text-333">
						企业地址
					</view>
					<view class="fu-invoice-item-info text-666">
						<input type="text" class="" v-model="invoiceData.invoice_company_address" placeholder="选填" />
					</view>
				</view>
				<view class="flex fu-invoice-item">
					<view class="fu-invoice-item-title text-333">
						企业电话
					</view>
					<view class="fu-invoice-item-info text-666">
						<input type="text" class="" v-model="invoiceData.invoice_company_phone" placeholder="选填" />
					</view>
				</view>
			</block> -->
			<!-- 展开折叠 end -->
		</view>
		<!-- 发票明细 end -->

		<!-- 发票内容 start -->
		<view class="fu-invoice-wrap">
			<view class="flex fu-invoice-item">
				<view class="fu-invoice-item-title text-333">
					{{i18n['发票内容']}}
				</view>
				<view class="fu-invoice-item-info text-666">
					<text>{{i18n['商品明细']}}</text>
				</view>
			</view>
		</view>
		<!-- 发票内容 end -->
		<!-- 联系方式 start -->
		<view class="flex bg-white align-center fu-invoice-item fu-invoice-item-active" style="margin-top: 20rpx;">
			<view class="fu-invoice-item-title text-333">
          {{i18n['联系方式']}}
			</view>
			<view class="fu-invoice-item-info text-666">
				<input type="text" @blur="filterMobile" class="" v-model="invoiceData.invoice_mobile" :placeholder="i18n['请输入手机号']" />
			</view>
		</view>
		<!-- 联系方式 end -->
		<!-- 电子邮箱 start -->
		<view class="flex bg-white align-center fu-invoice-item">
			<view class="fu-invoice-item-title text-333">
				{{i18n['电子邮箱']}}
			</view>
			<view class="fu-invoice-item-info text-666">
				<input type="text" placeholder-class="grey-text" v-model="invoiceData.invoice_email" :placeholder="i18n['电子邮箱不能为空']" />
			</view>
		</view>
		<!-- 电子邮箱 end -->
		
		<!-- 确认按钮 start -->
		<button type="warn" class="submit-btn" @click="submitClick">
			<text>{{type == 1?i18n['确认']:i18n['提交']}}</text>
		</button>
		<!-- 确认按钮 end -->
	</view>
</template>

<script>
	import { validate } from '@/common/utils/index.js'
	export default {
		data() {
			return {
				invoiceData: {
					invoice_type: 1,
					invoice_title: '',
					invoice_company_duty_paragraph: '',
					invoice_company_bank: '',
					invoice_company_bank_num: '',
					invoice_company_address: '',
					invoice_company_phone: '',
					invoice_mobile: '', //联系方式
					invoice_email: '', //电子邮件
				},
				type: 1,
				isClick: false, // {Boolean} 是否展开企业发票明细
				showPhone:'' //用来展示的手机号
			};
		},
		onLoad(option) {
		this.setNavigationBarTitle(this.i18n['申请发票'])
			console.log(option);
			this.invoiceData = option;
		},
		methods:{
			/**
			 * @description 手机号过滤中间四位用*代替
			 */
			filterMobile() {
				if (!this.invoiceData.invoice_mobile) return '';
				let phone = this.invoiceData.invoice_mobile;
				if(!validate(phone ,'phone')) {
					this.$message.info(this.i18n['请检查手机号']);
				} else {
					this.showPhone = phone.substr(0, 3) + '****' + phone.substr(-4);
				}
			},
			/**
			 * @event
			 * @description 点击提交按钮
			 */
			submitClick(){
			  if(!this.invoiceData.invoice_title.trim()){
			    this.$message.info(this.i18n['请输入发票抬头']);
			    return;
			  }
			  if(this.invoiceData.invoice_type == 2){
			    if(!this.invoiceData.invoice_company_duty_paragraph.trim()){
			      this.$message.info(this.i18n['请输入税号']);
			      return;
			    }
			  }
			  if(!this.invoiceData.invoice_mobile.trim()){
			    this.$message.info(this.i18n['请输入联系方式']);
			    return;
			  }
			  if(!validate(this.invoiceData.invoice_mobile ,'phone')) {
			  	this.$message.info(this.i18n['请检查手机号'])
				return;
			  }
			  if(this.invoiceData.invoice_email && !validate(this.invoiceData.invoice_email ,'email')) {
			    // 如果邮箱格式不正确时做点什么
				this.$message.info(this.i18n['请检查邮箱'])
				return;
			  }
			  // this.getInvoice(this.invoiceData);
			  uni.$emit('select_invoice', this.invoiceData);
			  uni.navigateBack();
			},
			/**
			 * @description 获取发票信息
			 * @param {Object} data 入参 填写的发票信息
			 */
			getInvoice(data) {
			  this.invoice = data;
			  // 关闭发票弹窗时判断 若选择了开发票且发票信息填写了则是开发票  否者是不开发票
			  if (data.invoice_title && this.isOpen == 1) {
			    this.isInvoice = 1;
			  } else {
			    this.isInvoice = 2;
			  }
			},
			/**
			 * @event
			 * @description 选择抬头类型
			 * @param {Number} type - 1：个人或事业单位；2：企业；
			 */
			changeRise(type){
			  this.invoiceData.invoice_type = type;
			},
			/**
			 * @event
			 * @description 展开企业发票明细
			 */
			clickArrow(){
			  this.isClick = !this.isClick;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F8F8F8;
	}
	.fu-invoice-wrap {
		// padding: 0 32rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.fu-invoice-item {
		// height: 72rpx;
		padding: 32rpx;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 10rpx;
		position: relative;

		.fu-invoice-item-title {
			flex: 1;
			.icon-important{
				width: 12rpx;
				height: 12rpx;
				margin-right: 8rpx;
			}
		}

		.fu-invoice-item-info {
			font-size: 28rpx;
			flex: 2;
			text-align: right;

			input {
				font-size: 28rpx;
				text-align: right;

			}
		}
	}
	.red-item{
		// width: 750rpx;
		height: 88rpx;
		background: rgba(255, 100, 100, 0.1);
		font-size: 28rpx;
		font-weight: bold;
		line-height: 88rpx;
		color: $theme;
		padding-left: 32rpx;
	}
	// 下面带线条
	.fu-invoice-item-active {
		&:after {
			content: '';
			width: 686rpx;
			height: 1rpx;
			border-bottom: 2rpx solid #EEEEEE;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
	.grey-text{
		color: #BFBFBF;
	}
	.font-24 {
		font-size: 24rpx;
	}

	.submit-btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 48rpx;
		width: 686rpx;
		height: 88rpx;
		background: $bgtheme;

		// margin-top: 40rpx;
	}
</style>
